<template>
    <el-date-picker v-model="dateForm.value" type="daterange" range-separator="至" start-placeholder="开始日期"
        end-placeholder="结束日期" @change="dateChange" :class="[classStyle]">
    </el-date-picker>
</template>

<script>
    export default {
        data() {
            return {
                dateForm: {
                    value: [],
                },
                obj: {},
                start:'yyyy-MM-dd 00:00:00',
                end:'yyyy-MM-dd 23:59:59'
            }
        },
        props: {
            label: [Array, Number],
            comData: {
                type: Object,
                default: () => {}
            },
            classStyle: {
                type: String,
                default: ''
            }
        },
        mounted() {
            if (this.comData.dis) { //同inputNumber.vue
                this.obj[this.label[0]] = ''
                this.obj[this.label[1]] = ''
            } else {
                this.obj[this.label] = ''
            }
            this.$emit('setFormData', this.obj)
        },
        methods: {
            dateChange(val) {
                if (this.comData.dis) { //同inputNumber.vue
                    if (val == null || val.length == 0) {
                        this.obj[this.label[0]] = ''
                        this.obj[this.label[1]] = ''
                    } else {
                        this.obj[this.label[0]] = val[0].dateFormat(this.start)
                        this.obj[this.label[1]] = val[1].dateFormat(this.end)
                    }
                } else {
                    if (val == null || val.length == 0) {
                        this.obj[this.label] = ''
                    } else {
                        this.obj[this.label] = val[0].dateFormat(this.start) + ',' + val[1].dateFormat(this.end)
                    }
                }
                this.$emit('setFormData', this.obj)
            }
        },
    }
</script>

<style lang="less" scoped>
    /deep/ .el-date-editor.el-input.dialog,
    .el-date-editor.el-input__inner.dialog {
        width: 80% !important;
    }

    /deep/ .el-range-editor .el-range-input {
        flex: 3;
    }

    /deep/ .el-date-editor .el-range-separator {
        flex: 1;
    }
</style>